<template>
  <view
    class="model-swiper"
  >
    <plus
      v-if="!value3.length"
      class="model-swiper-nodata"
      @click="dialogVisible = true"
    ></plus>
    <div v-else  class="model-swiper-data">
        <div  v-for="(item, index) in value3" 
          :key="index" 
          class="model-swiper-data-item"
          >
          <video v-if="isVideo(item)" :src="item.url" style="width: 5rem; height: 5rem; margin-right: 8px"> </video>
            <img v-else :src="item.url" style="width: 5rem; height: 5rem; margin-right: 8px"></img>
           
        </div>
    </div>
    <el-button  v-if="value3.length"  @click="dialogVisible = true" type="primary">编辑</el-button>
    <div class="model-swiper-hint">
      此处上传详情页重点展示的内容，手机端查看效果更佳，格式：JPG/PNG/GIF/MP4，数量限制6张，每张小于10M
    </div>
  </view>
  <el-dialog
    title="图片视频上传"
    v-model="dialogVisible"
    width="500"
    :before-close="handleClose"
  >
    <view>
      <el-upload
        action="#" 
        list-type="picture-card" 
        :auto-upload="false"
        :on-change="fileChange"
        :before-upload="beforeUpload"
        v-model:file-list="value3"
      >
      <el-icon><Plus /></el-icon>
      <template #file="{ file }">
      <div>
        
        {{printFile(file)}}
        <video v-if="isVideo(file)" class="el-upload-list__item-thumbnail" style="display: flex;justify-content: center;" :src="file.url" alt=""></video>
        <img v-else class="el-upload-list__item-thumbnail"  :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
      </el-upload>
    </view>
  </el-dialog>
    <!-- 预览图片 -->
    <el-image-viewer
    v-if="dialogPreviewVisible"
    :url-list="dialogImageUrl"
    @close="dialogPreviewVisible = false"
  />
</template>

<script setup>
import { ref, onMounted } from "vue";
import "@/utils/style/modelStyle.scss"
const value3 = defineModel("value3");
// const fileList = ref([]);
const dialogImageUrl = ref([]);
const dialogPreviewVisible = ref(false);

// const successFile=(e)=>{
//     console.log(888,e);
// }
const printFile = (file) => {
  console.log(999,file,888,value3.value);
};
const beforeUpload = (file) => {
    //todo 不上传不会触发。JPG/PNG/GIF/MP4，数量限制6张，每张小于10M
    console.log(111,file);
};
const fileChange = (file, fileList) => {
  console.log(555,file, fileList);
};

const isVideo = (file) => {
  return file.name.toString().slice(-3).toLowerCase() === "mp4" ? true : false;
};

onMounted(() => {
  value3.value = [
    // {
    //   name: "pic",
    //   type:"image",
    //   url: "https://img1.baidu.com/it/u=2113428616,299759932&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422",
    // },
    // {
    //   name: "pic",
    //   url: "https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF",
    // },
    // {
    //   name: "video",
    //   url: "https://highlight-video.cdn.bcebos.com/video/6s/afdba56e-2de2-11ef-ae87-6c92bf61a84d.mp4",
    // },
  ];
});

const dialogVisible = ref(false);
const handleClose = () => {
  dialogVisible.value = false;
};

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(777,uploadFile, uploadFiles);

  console.log(7777,value3.value);
  let index = value3.value.findIndex((item) => item.url === uploadFile.url);
  if (index !== -1) {
    value3.value.splice(index, 1);
  }
};

const handlePictureCardPreview = (uploadFile) => {
    if (isVideo(uploadFile)) {
        window.open(uploadFile.url)
    }else{
        dialogImageUrl.value.push(uploadFile.url)
        //  console.log(666,dialogImageUrl.value);
        dialogPreviewVisible.value = true;
    }

};
</script>

<style lang="scss"></style>
